@import "../../../../../both/mixin";

.personal_courses_cr.bln{

  .no_data_wr{
    height : 420px;
    width : 915px;
    text-align: center;
    margin-right : 200px;
    transform: translate(-64px,0);

    &:before{
      content : "";
      height : 100%;
      vertical-align: middle;
      display: inline-block;
    }

    .no_data{
      display: inline-block;
      color : #B5B9BC;
      font-size : 20px;

      a{
        text-decoration: none;
        color : #F01400;
      }
    }
  }

  ul.courses_list{
    list-style: none;
    padding-left : 64px;
    display: block;
    min-height : 400px;

    li.course_item{
      position: relative;
      display: block;
      height : 174px;
      padding-left : 37px;
      border-left : 1px solid #D3D7DA;

      &:first-child:before{
        content : "";
        position: absolute;
        width : 1px;
        height : 20px;
        left : -1px;
        top : 0;
        background-color: #FFFFFF;
      }

    }

    .watch_time{
      position: absolute;
      left : 0;
      top : 20px;
      margin-left : -64px;
      line-height: 16px;
      font-size : 12px;
      color : #8a8c8f;

      .watch_year{
        font-size : 18px;
        font-weight: 400;
      }

      &:before{
        content : "";
        display: block;
        position: absolute;
        left : 60px;
        width : 8px;
        height : 8px;
        border-radius: 50%;
        background-color : #d0d6d9;
      }
    }

    @include cf(".course_list_m");
    .course_list_m{
      height : 174px;
      padding : 30px 0;

      a{
        text-decoration: none;

        &.cover{
          display: block;
          float : left;
        }

        &.title{
          font-size : 18px;
          font-weight: 700;
          color : #14191e;

          &:hover{
            color : #ec1500;
          }
        }
      }

      img.course_cover{
        width : 200px;
        height : 113px;
      }

      div.course_info{
        position: relative;
        float : left;
        margin-left : 30px;
        width : 582px;
        height : 113px;
      }

      div.course_count{
        position: absolute;
        bottom: 0;
        padding-bottom:15px;

        @include cf("ul.count_wr");
        ul.count_wr{
          list-style: none;

          li{
            list-style: none;
            float : left;
            width : 135px;
            color : #787D82;
            font-size : 14px;
          }
        }
      }

      div.course_ctrl{
        position: absolute;
        right : 0;
        top : 0;
        color : #787D82;

        i{
          cursor: pointer;
        }

        &:hover{
          color : #14191e;
        }

        &:hover + .share_box{
          display: block;
        }
      }

      .share_box{
        width : 120px;
        height : 60px;
        line-height : 60px;
        text-align: center;
        color : #787D82;
        position: absolute;
        right : 0;
        top : 0;
        background-color : #fff;
        box-shadow: 4px 4px 10px 2px #e1e1e1;
        display: none;

        span{
          display: inline-block;
          margin : 0 10px;
          cursor: pointer;

          &:first-child{
            margin-left : 0;
          }
          &:last-child{
            margin-right : 0;
          }

          &.active{
            color : #E99C22;
          }
        }

        &:hover{
          display: block;
        }

        &:hover + div.course_ctrl{
          color : #14191e;
        }
      }


    }

  }

  .user_course_list_paging{
    margin: 20px 0;
    text-align: center;

    ul {
      display: inline-block;
      list-style: none;

      li{
        display: inline-block;
        padding : 5px 10px;
        font-size : 16px;
        vertical-align: middle;
        height : 30px;
        line-height : 20px;
        cursor: pointer;
      }

      li.disable{
        cursor: auto;
        color : #c8cdd2;
      }

      li.page{
        width : 30px;
        border-radius: 100%;
      }

      li.page.cur{
        background-color : #4d555d;
        color : white;
      }

    }
  }
}